import React, { Component } from "react";
import { Card, Input, Select, Form, Tooltip, Icon, Switch } from "antd";
import { connect } from "dva";
import styles from "./index.less";
import SelectModal from "../../../recommendCenter/add/components/SelectModal";

const { TextArea } = Input;
const { Option } = Select;

@connect(stores => ({
  orgList: stores.adddataSource,
  personDep: stores.personSelectModel
}))
class RegisterBasic extends Component {
  state = {
    selectVisible: false,
    manager: "",
    managerName: "",
    personNum: ""
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "adddataSource/getOrgList",
      payload: {}
    });
  }

  onChangeType = value => {
    const { handleType = () => {} } = this.props;
    handleType(value);
  };

  confirm = (e, desc) => {
    const { getPass = () => {} } = this.props;
    getPass(e);
    this.props.form.setFieldsValue({
      owners: desc[0]
    });
    this.setState({ selectVisible: false, personNum: e[0] });
  };

  closeModal = () => {
    this.setState({ selectVisible: false });
  };

  treeSelectOnChange = (value, lable) => {
    this.props.changeOwnerDepatName(lable[0]);
  };

  render() {
    // , orgList
    const { chanleType = "1", channelsTypesData = [] } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { selectVisible } = this.state;
    // const { orgTree = [] } = orgList;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    };

    return (
      <Card title="基本信息" className={styles.root}>
        <Form
          {...formItemLayout}
          style={{ width: 800 }}
          onSubmit={this.handleSubmit}
        >
          <Form.Item label=" 渠道账号编码：">
            {getFieldDecorator("channelCode", {
              rules: [
                {
                  required: true,
                  message: "请输入渠道账号编码!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={25}
                placeholder="请输入渠道账号编码"
                // value={this.state.managerName}
              />
            )}
          </Form.Item>
          <Form.Item label=" 渠道账号名称：">
            {getFieldDecorator("description", {
              rules: [
                {
                  required: true,
                  message: "请输入渠道账号名称!"
                }
              ]
            })(
              <Input
                style={{ width: 466 }}
                maxLength={25}
                placeholder="请输入渠道账号名称"
                // value={this.state.managerName}
              />
            )}
          </Form.Item>
          {/* {chanleType === "6" && (
            <Form.Item label=" 渠道ID：">
              {getFieldDecorator("channeluuid", {
                initialValue: (Math.random() * 1000).toString(),
                rules: [
                  {
                    message: "请输入渠道ID!"
                  },
                  {
                    required: true,
                    message: "请输入渠道ID!"
                  }
                ]
              })(<Input style={{ width: 466 }} type="Password" disabled />)}
            </Form.Item>
          )} */}

          <Form.Item label=" 渠道类型：">
            {getFieldDecorator("channelType", {
              rules: [
                {
                  required: true,
                  message: "请选择渠道类型!",
                  whitespace: true
                }
              ]
            })(
              <Select
                showSearch
                style={{ width: 466 }}
                placeholder="请选择渠道类型"
                onChange={this.onChangeType}
              >
                {channelsTypesData.map((item, index) => (
                  <Option key={index} value={`${item.value}`}>
                    {item.des}
                  </Option>
                ))}
              </Select>
            )}
            {chanleType === "6" && (
              <Tooltip title="渠道类型为后端系统的接收端，需要根据接入规范，封装接收接口，发布到IT服务平台后，新建渠道时，通过连通测试，渠道方可使用。">
                <span>
                  <Icon
                    type="question-circle"
                    theme="filled"
                    style={{
                      fontSize: 16,
                      color: "rgba(0,0,0,0.25)",
                      marginLeft: 8
                    }}
                  />
                </span>
              </Tooltip>
            )}
            {chanleType === "6" && (
              <div>
                <span>
                  {/* 参考文档：<Button type="link">接口封装规范</Button> */}
                </span>
              </div>
            )}
          </Form.Item>
          {/* <Form.Item label=" 管理员：">
            {getFieldDecorator("owners", {
              rules: [
                {
                  required: true,
                  message: "请选择管理员!",
                  whitespace: true
                }
              ]
            })(
              <Input
                placeholder="请选择管理员"
                style={{ width: 466 }}
                onClick={() => {
                  this.setState({ selectVisible: true });
                }}
                readOnly
              />
            )}
          </Form.Item>

          <Form.Item label=" 归属部门：">
            {getFieldDecorator("ownerDept", {
              rules: [
                {
                  required: true,
                  message: "请选择归属部门！",
                  whitespace: true
                }
              ]
            })(
              <TreeSelect
                treeData={orgTree}
                style={{ width: 466 }}
                dropdownStyle={{ maxHeight: 350, overflow: "auto" }}
                showCheckedStrategy="SHOW_PARENT"
                onChange={this.treeSelectOnChange}
                placeholder="请选择归属部门"
              />
            )}
          </Form.Item> */}
          <Form.Item label=" 渠道描述：">
            {getFieldDecorator("pushChannelDescription", {
              rules: [
                {
                  message: "请输入渠道描述!",
                  whitespace: true
                }
              ]
            })(
              <TextArea
                style={{ width: 466 }}
                placeholder="请输入渠道描述"
                rows={4}
                maxLength={100}
              />
            )}
          </Form.Item>

          <Form.Item label="启用">
            {getFieldDecorator("useStatus", { valuePropName: "checked" })(
              <Switch checkedChildren="开" unCheckedChildren="关" />
            )}
          </Form.Item>
        </Form>
        <SelectModal
          visible={selectVisible}
          closeModal={this.closeModal}
          confirm={this.confirm}
          isMutiple={false}
          manager={true}
        />
      </Card>
    );
  }
}

export default RegisterBasic;
